<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单管理 - ERP系统</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>ERP系统 - 订单管理</h1>
        </header>
        
        <nav>
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a href="supplier.html">供应商管理</a></li>
                <li><a href="product.html">商品管理</a></li>
                <li><a href="#order-list">订单列表</a></li>
                <li><a href="#create-order">创建订单</a></li>
            </ul>
        </nav>
        
        <main>
            <section id="order-list">
                <h2>订单列表</h2>
                <div class="toolbar">
                    <button id="refresh-btn">刷新</button>
                </div>
                <table id="orders-table">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>订单编号</th>
                            <th>供应商ID</th>
                            <th>总金额</th>
                            <th>订单日期</th>
                            <th>状态</th>
                            <th>创建时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- 订单数据将通过JavaScript动态加载 -->
                    </tbody>
                </table>
            </section>
            
            <section id="create-order" class="hidden">
                <h2>创建订单</h2>
                <form id="create-order-form">
                    <div class="form-group">
                        <label for="supplier-id">供应商ID:</label>
                        <input type="number" id="supplier-id" name="supplierId" required>
                    </div>
                    <div class="form-group">
                        <label for="order-date">订单日期:</label>
                        <input type="date" id="order-date" name="orderDate" required>
                    </div>
                    <div class="form-group">
                        <label for="order-status">状态:</label>
                        <select id="order-status" name="status" required>
                            <option value="DRAFT">草稿</option>
                            <option value="SUBMITTED">已提交</option>
                            <option value="APPROVED">已批准</option>
                            <option value="REJECTED">已拒绝</option>
                            <option value="CLOSED">已关闭</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="order-remark">备注:</label>
                        <textarea id="order-remark" name="remark"></textarea>
                    </div>
                    <button type="submit">创建订单</button>
                </form>
            </section>
            
            <section id="edit-order" class="hidden">
                <h2>编辑订单</h2>
                <form id="edit-order-form">
                    <input type="hidden" id="edit-order-id" name="id">
                    <div class="form-group">
                        <label for="edit-supplier-id">供应商ID:</label>
                        <input type="number" id="edit-supplier-id" name="supplierId" required>
                    </div>
                    <div class="form-group">
                        <label for="edit-order-date">订单日期:</label>
                        <input type="date" id="edit-order-date" name="orderDate" required>
                    </div>
                    <div class="form-group">
                        <label for="edit-order-status">状态:</label>
                        <select id="edit-order-status" name="status" required>
                            <option value="DRAFT">草稿</option>
                            <option value="SUBMITTED">已提交</option>
                            <option value="APPROVED">已批准</option>
                            <option value="REJECTED">已拒绝</option>
                            <option value="CLOSED">已关闭</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="edit-order-remark">备注:</label>
                        <textarea id="edit-order-remark" name="remark"></textarea>
                    </div>
                    <button type="submit">更新订单</button>
                    <button type="button" id="cancel-edit">取消</button>
                </form>
            </section>
            
            <section id="order-details" class="hidden">
                <h2>订单详情</h2>
                <div class="order-info">
                    <div class="info-grid">
                        <div class="info-item">
                            <span class="info-label">ID:</span>
                            <span id="detail-id"></span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">订单编号:</span>
                            <span id="detail-order-number"></span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">供应商ID:</span>
                            <span id="detail-supplier-id"></span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">总金额:</span>
                            <span id="detail-total-amount"></span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">订单日期:</span>
                            <span id="detail-order-date"></span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">状态:</span>
                            <span id="detail-status"></span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">创建时间:</span>
                            <span id="detail-created-time"></span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">更新时间:</span>
                            <span id="detail-updated-time"></span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">备注:</span>
                            <span id="detail-remark"></span>
                        </div>
                    </div>
                    <div class="order-actions">
                        <button id="edit-order-btn" class="btn btn-primary">编辑</button>
                        <button id="submit-order-btn" class="btn btn-success">提交</button>
                        <button id="approve-order-btn" class="btn btn-success">批准</button>
                        <button id="reject-order-btn" class="btn btn-warning">拒绝</button>
                        <button id="close-order-btn" class="btn btn-warning">关闭</button>
                        <button id="delete-order-btn" class="btn btn-danger">删除</button>
                        <button id="back-btn" class="btn">返回</button>
                    </div>
                </div>
            </section>
        </main>
    </div>
    
    <script src="js/order.js"></script>
</body>
</html>